<template>
  <div class="wy">
    <div class="box">
        <!-- <h1>后台系统</h1> -->
    </div>
    <el-card class="c">
      <h1>后台系统</h1>
      <!-- 表单 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户姓名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="btn" type="success" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button class="btn" type="warning" @click="resetForm('ruleForm')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { postlogin } from "@/Api";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入病人姓名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入病人密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    submitForm(formName) {
      let thisa = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            username: thisa.ruleForm.username,
            password: thisa.ruleForm.password,
          };
          console.log(data);
          postlogin(data).then((res) => {
            console.log(res);
            if (res.meta.status === 200) {
              this.$message({
                message: res.meta.msg,
                type: "success",
              });
            }
            //    保存token到本地
            sessionStorage.setItem('token',res.data.token)
            // 跳转到首页
            this.$router.push({path:'/'})
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang='scss' scoped>
// .el-input__inner{
//     margin-bottom: 30px;
// }
.btn {
  width: 100px;
  height: 40px;
}
h1 {
  // color: #fff;
  margin-bottom: 23px;
}
.c {
  width: 500px;
  height: 300px;
  overflow: hidden;
  // background-color: #2196f3;
}
* {
  margin: 0;
  padding: 0;
  margin: auto;
  overflow: hidden;
}
.wy {
  //       display: block;
  //   justify-content: center;
  //   align-items: center;
  // margin:  50px auto;
  // line-height: 50px;
  padding: 50px 0;
  width: 100vw;
  height: 100vh;
    background-color: #34429a;
  overflow: hidden;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: radial-gradient(#f2761e, #ef4921);
}
.box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box .eye {
  position: relative;
  width: 120px;
  height: 120px;
  display: block;
  background: #fff;
  margin: 0 20px;
  border-radius: 50%;
  box-shadow: 0 5px 45px rgba(0, 0, 0, 0.2), inset 0 0 15px #f00,
    inset 0 0 25px #f00;
}
.box .eye::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #000000;
  border: 10px solid #2196f3;
  box-sizing: border-box;
  // margin-top: -200px;
}
h1{
  color: #111;
  text-align: center;
}
.demo-ruleForm{
  // margin-top: 200px;
}
</style>
